<template>
  <basic-container>
    <el-row>
      <el-col :span="8">
        <avue-crud
          :option="option"
          :table-loading="loading"
          :data="data"
          v-model="form"
          ref="crud"
          @row-click="rowClick"
          @search-change="searchChange"
          @search-reset="searchReset"
          @refresh-change="refreshChange"
          @on-load="onLoad"
          :before-close="beforeClose"
        >
        </avue-crud>
      </el-col>
      <el-col :span="16">
        <el-tabs type="border-card" style="margin: 10px" v-if="isShowDetailTable">
          <el-tab-pane label="显隐设置">
            <avue-crud
              :option="detailOption"
              :table-loading="detailLoading"
              :data="detailData"
              :permission="permissionList"
              :before-open="beforeOpen"
              ref="detailCrud"
              @row-update="detailUpdate"
              @row-save="detailSave"
              @row-del="detailDel"
              @selection-change="selectionDetailChange"
              @refresh-change="detailRefreshChange"
            >
              <template slot-scope="scope" slot="menu">
                <el-switch v-model="scope.row.status" active-text="显示" inactive-text="隐藏" @change="statusChange(scope.row)"></el-switch>
              </template>
            </avue-crud>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </basic-container>
</template>
<script>
import { getList, submit } from '@/api/system/viewSetting';

export default {
  data() {
    return {
      query: {},
      loading: true,
      option: {
        height: 'calc(100vh - 367px)',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchSpan: 12,
        searchMenuSpan: 12,
        border: true,
        index: true,
        indexLabel: '序号',
        addBtn: false,
        viewBtn: true,
        menu: false,
        selection: false,
        highlightCurrentRow: true, // 选中高亮
        refreshBtn: false,
        columnBtn: false,
        column: [
          {
            label: '页面名称',
            prop: 'name',
            search: true
          },
          {
            label: '操作端',
            prop: 'terminal'
          },
          {
            label: '说明',
            prop: 'remark'
          }
        ]
      },
      data: [],
      detailLoading: false,
      detailData: [],
      detailOption: {
        //包装详情列表内容配置
        height: 'calc(100vh - 287px)',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        indexLabel: '序号',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        selection: false,
        menuWidth: 150,
        refreshBtn: false,
        columnBtn: false,
        column: [
          {
            label: '菜单名称',
            prop: 'name'
          },
          {
            label: '更新人',
            prop: 'updateByName'
          },
          {
            label: '更新时间',
            prop: 'updateTime'
          }
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$structuralSplit();
      this.isShowDetailTable = true;
    });
  },
  methods: {
    searchReset() {
      this.query = {};
      this.onLoad();
    },
    searchChange(params, done) {
      this.query = params;
      this.onLoad();
      done();
    },
    refreshChange() {
      this.onLoad();
    },
    beforeOpen(done, type) {
      if (['edit', 'view'].includes(type)) {
        const attributeKey = this.findObject(this.detailOption.column, 'attributeKey');
        attributeKey.disabled = true;
        const controlType = this.findObject(this.detailOption.column, 'controlType');
        controlType.disabled = true;
      }
      done();
    },
    onLoad() {
      this.loading = true;
      getList(1, 10000, Object.assign(this.query, { parentId: 0 })).then((res) => {
        this.data = this._get(res, 'data.data.records', []);
        this.loading = false;
        this.detailData = [];
      });
    },
    /**
     * 单击事件
     */
    rowClick(row) {
      this.selectPage = row;
      this.onDetailLoad();
    },
    onDetailLoad() {
      this.detailLoading = true;
      getList(1, 10000, { parentId: this.selectPage.id }).then((res) => {
        this.detailData = this._get(res, 'data.data.records', []);
        this._forEach(this.detailData, (item) => {
          item.status = item.status == 1 ? true : false;
        });
        this.detailLoading = false;
      });
    },
    statusChange(row) {
      submit({ id: row.id, status: row.status ? 1 : 0 }).then((res) => {
        this.$message.success(res.data.msg);
        this.onDetailLoad();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  padding: 16px 24px;
  min-height: 20px;
  border-bottom: 1px solid #f0f0f0;
}
::v-deep .el-dialog__footer {
  border-top: 1px solid #f0f0f0;
  padding: 10px 16px;
}

.custom-informationLabel {
  .el-tabs__item {
    color: #606266 !important;
    font-weight: bold;
  }
  .el-form-item__content {
    line-height: 32px;
  }
}
::v-deep .el-tabs__item {
  color: #606266 !important;
  font-weight: bold;
}
</style>
